<template>
  <div class="all">
    <!-- 头部背景以及用户信息 -->
    <div class="head">
      <van-nav-bar title="我的" />
      <div class="head_user">
        <van-image
          round
          width="5rem"
          height="5rem"
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
        <p>yurui</p>
      </div>
    </div>
    <!-- 更多信息 -->
    <div class="info">
      <div class="info_boy">收藏</div>
      <div class="info_boy">点赞</div>
      <div class="info_boy">关注</div>
    </div>
    <!-- 更多服务 -->
    <div class="service">
      <div class="service_boy_top">更多服务</div>
      <div class="service_boy">
        <div class="serice_cont">1</div>
        <div class="serice_cont">1</div>
        <div class="serice_cont">1</div>
        <div class="serice_cont">1</div>
      </div>
      <div class="service_boy">
        <div class="serice_cont">2</div>
        <div class="serice_cont">2</div>
        <div class="serice_cont">2</div>
        <div class="serice_cont">2</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
};
</script>

<style scoped>
.all {
  height: 100vh;
  background-color: #f7f8f9;
}
.head {
  width: 100%;
  height: 250px;
  background-image: url("../assets/我的背景图.jpg");
  opacity: 0.9;
}
.van-nav-bar {
  opacity: 0.7;
}

.head_user {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 100px;
}
.info {
  width: 96%;
  height: 50px;
  margin-left: 1.5%;
  margin-top: 15px;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
}
.info_boy {
  width: 33%;
  display: flex;
  justify-content: center;
}

.service {
  margin-top: 15px;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  height: 130px;
  border-radius: 10px;
}
.service_boy {
  display: flex;
  justify-content: center;
}
.serice_cont {
  width: 25%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
